<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app='appModule'>
<head>
    <title>Accordion</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <link href="accordion.css" rel='stylesheet'>
</head>
<body ng-controller='SomeController'>
<accordion>
    <expander class='expander'
              ng-repeat='expander in expanders'
              expander-title='expander.title'>
        {{expander.text}}
    </expander>
</accordion>
</body>

<script>
    function SomeController($scope) {
        $scope.expanders = [
            {title: 'Click me to expand',
                text: 'Hi there folks, I am the content that was hidden but is now shown.'},
            {title: 'Click this',
                text: 'I am even better text than you have seen previously'},
            {title: 'No, click me!',
                text: 'I am text that should be seen before seeing other texts'}
        ];
    }

    var appModule = angular.module('appModule', []);

    appModule.directive('accordion', function () {
        return {
            restrict: 'EA',
            replace: true,
            transclude: true,
            template: '<div ng-transclude></div>',
            controller: function () {
                var expanders = [];

                this.gotOpened = function (selectedExpander) {
                    angular.forEach(expanders, function (expander) {
                        if (selectedExpander != expander) {
                            expander.showMe = false;
                        }
                    });
                }

                this.addExpander = function (expander) {
                    expanders.push(expander);
                }
            }
        }
    });
    appModule.directive('expander', function () {
        return {
            restrict: 'EA',
            replace: true,
            transclude: true,
            require: '^?accordion',
            scope: { title: '=expanderTitle' },
            template: '<div>' +
                    '<div class="title" ng-click="toggle()">{{title}}</div>' +
                    '<div class="body" ng-show="showMe" ng-transclude></div>' +
                    '</div>',
            link: function (scope, element, attrs, accordionController) {
                scope.showMe = false;
                accordionController.addExpander(scope);

                scope.toggle = function toggle() {
                    scope.showMe = !scope.showMe;
                    accordionController.gotOpened(scope);
                }
            }
        }
    });
</script>
</html>
